<template>
  <div class="s-div">
    <div class="share" id="share">
      <template v-if="!src">
        <div class="head-div">
          <div class="h-div">
            <img :src="headImgUrl" alt="头像" crossorigin="Anonymous" crossOrigin="*">
          </div>
          <div class="h-text">
            <p>求帮忙，扫一下，</p>
            <p>免费资料带回家！</p>
          </div>
        </div>
        <div class="erweima-div">
          <img :src="erweima" alt="" style="height:100px;width:100px;" crossorigin="Anonymous" crossOrigin="*">
          <div class="jiao1"></div>
          <div class="jiao2"></div>
          <div class="jiao3"></div>
          <div class="jiao4"></div>
        </div>
        <img id="img" src="../assets/img/share-bg.jpg" alt="">
      </template>
      <img v-else :src="src" alt="" style="width:100%">
    </div>
    <div class="tip-div" v-show="showTip">
      <div class="mask" ></div>
      <div class="tip-text" @click="hideTip">
        <div>
        <p>长按转发给好友，</p>
        <p>或长按保存后分享朋友圈</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import html2canvas from 'html2canvas'
import conf from 'api/conf'
import io from 'api/io'
import wxConfig from 'api/wx'
export default {
  name: 'share',
  data() {
    return {
      srsActivityId: this.$route.query.srsActivityId,
      src: '',
      headImgUrl: io.img + '?openId=' + localStorage.getItem('openId')+'&projectCode='+conf.projectCode,
      erweima: '',
      showTip: true
    }
  },
  created() {
    this.erweima = conf.baseApiPath + '/api/qrcode/encode?content=' + encodeURIComponent(conf.basePath + '/#/?srsActivityId=' + this.srsActivityId)
    this.init()
  },
  mounted() {
    wxConfig()
    let img = document.querySelector('#img')
    img.onload = () => {  //图片加载成功后把地址给原来的img
      console.log("xx")
      // this.toImg()
    }
  },
  methods: {
    hideTip(){
      this.showTip=false
      this.toImg()
    },
    toImg() {
      let content_html = document.getElementById('share');　　　　//要转化的div
      let width = content_html.offsetWidth;
      let height = content_html.offsetHeight;
      let offsetTop = content_html.offsetTop;
      let canvas = document.createElement("canvas");
      let context = canvas.getContext('2d');
      let scaleBy = Math.ceil(window.devicePixelRatio);
      canvas.width = width * scaleBy;
      canvas.height = (height + offsetTop) * scaleBy;
      context.scale(scaleBy, scaleBy);
      var opts = {
        allowTaint: true,//允许加载跨域的图片
        tainttest: true, //检测每张图片都已经加载完成
        scale: scaleBy, // 添加的scale 参数
        canvas: canvas, //自定义 canvas
        logging: false, //日志开关，发布的时候记得改成false
        width: width, //dom 原始宽度
        height: height //dom 原始高度
      };
      html2canvas(content_html, opts).then((canvas) => {
        canvas.style.width = width + "px";
        canvas.style.height = height + "px";
        try {
          this.src = canvas.toDataURL("image/jpeg");
        } catch (err) {
          alert(err)
        }
        // this.$dialog.alert('请长按保存到手机', { okText: '确定' })
        // alert(this.src)
      });

    },
    init() {
      wx.ready(() => {
        let title = '我在帮孩子领取小学语数英知识图谱活动，快来助我一臂之力！'
        let link = conf.basePath + '/#/?srsActivityId=' + this.srsActivityId
        console.log('xxxx', link)
        wx.onMenuShareTimeline({
          title: title, // 分享标题  
          link: link, // 分享链接,将当前登录用户转为puid,以便于发展下线  
          imgUrl: 'http://h5.game.yuyou100.com/srs/static/share.jpeg', // 分享图标  
          success: () => {
            // 用户确认分享后执行的回调函数 
            // this.$dialog.alert('分享成功', { okText: '确定' })
          },
          cancel: function() {
            // 用户取消分享后执行的回调函数  
          }
        });
        wx.onMenuShareAppMessage({
          title: title, // 分享标题  
          desc: '亲们帮帮忙，点击一下，我想帮孩子领小学语数英知识图谱~', // 分享描述  
          link: link, // 分享链接  
          imgUrl: 'http://h5.game.yuyou100.com/srs/static/share.jpeg', // 分享图标  
          type: '', // 分享类型,music、video或link，不填默认为link  
          dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空  
          success: () => {
            // 用户确认分享后执行的回调函数  
            // this.$dialog.alert('分享成功', { okText: '确定' })
          },
          cancel: function() {
            // 用户取消分享后执行的回调函数  
          }
        });
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
.s-div
  // height 100%
.tip-div
  height 100%
  width 100%
  position fixed
  top 0
  // z-index 1
  .mask
    height 100%
    width 100%
    position fixed
    top 0
    left 0
    background black
    opacity .8
  .tip-text
    position fixed
    z-index 11
    color white
    height 100%
    width 100%
    text-align center
    display flex
    align-items center
    justify-content center
    p
      margin 0

.share
  position relative
  width 100%
  height 100%
  #img
    width 100%
    height 100%
.head-div
  position absolute
  top 10px
  right 0
  padding 0px 5px 0px 35px
  background #f7dcad
  height 45px
  box-sizing border-box
  color #010101
  font-size 12px
  display flex
  align-items center
  .h-text
    p
      margin 0
  .h-div
    width 41px
    height 41px
    border-radius 45px
    overflow hidden
    border 2px solid #b4e2ff
    position absolute
    top 0
    left -22.5px
    img 
      width 100%
      height 100%
.erweima-div
  position absolute
  bottom 25px
  right 8%
  width 80px
  height 80px
  @media screen and (min-width:375px) and (max-width:414px){
    height 100px
    width 100px
  }
  display inline-block
  div
    position absolute
    height 12px
    width 12px
  .jiao1
    border-top 3px solid #ff7800
    border-left 3px solid #ff7800
    top -3px
    left -3px
  .jiao2
    border-top 3px solid #ff7800
    border-right 3px solid #ff7800
    top -3px
    right -3px
  .jiao3
    border-bottom 3px solid #ff7800
    border-right 3px solid #ff7800
    bottom -3px
    right -3px
  .jiao4
    border-bottom 3px solid #ff7800
    border-left 3px solid #ff7800
    bottom -3px
    left -3px
  img 
    width 100% !important
    height auto !important
</style>


